<script lang="ts">
import Vue from "vue";

export default Vue.extend({
  props: {
    title: {
      type: String,
      default: ''
    },
    left_text: {
      type: String,
      default: ''
    },
    is_link: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: false
    }
  },
  computed: {
    typeImage() {
      const fileName = this.title;
      const extension = fileName.split('.').pop()?.toLowerCase();
      switch (extension) {
        case 'xls':
          return 'excel.png'
        case 'xlsx':
          return 'excel.png'
        case 'doc':
          return 'word.png'
        case 'docx':
          return 'word.png'
        case 'ppx':
          return 'ppt.png'
        case 'pdf':
          return 'ppt.png'
        case 'pptx':
          return 'ppt.png'
      }
      return ''
    }
  }
})
</script>
<template>
  <view class="card_box">
    <view v-if="title!==''" class="title_box">
      <view class="title flex-row" style="gap: 30rpx;">
        <view>
          <image style="width: 120rpx;height: 120rpx" :src="`/static/index/${typeImage}`"></image>
        </view>
        <view class="flex-column" style="gap: 20rpx;overflow: hidden">
          <view>{{ title }}</view>
        </view>
      </view>
      <view class="flex-row" :hover-class="is_link?'hover':''" style="align-items: center;gap: 10rpx"
            @click="$emit('leftClick')">
        <view class="left_text">{{ left_text }}</view>
        <view>
          <u-icon :name="arrowIcon"></u-icon>
        </view>
      </view>
    </view>
    <slot></slot>
  </view>
</template>

<style scoped lang="scss">
.card_box {
  box-shadow: 0px 0px 5px 0px rgba(1, 1, 1, 0.25);
  background-color: #FFFFFF;
  border-radius: 12px;
  padding: 0rpx 20rpx;
}

.title_box {
  gap: 20rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 0;
  border-bottom: 1px solid $my-border-color;
}

.title {
  color: $uni-color-title;
  font-size: $uni-font-size-lg;
  font-weight: bold;
  overflow-wrap: anywhere;
}

.left_text {
  font-size: $uni-font-size-sm;
  color: $uni-text-color-placeholder;
}
</style>